{% style %}
.cover_tab_name {
  display: flex;
  gap:10px;
  margin-bottom: 1.5rem;
}
.tab_name .btn {
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
  background: #fff;
  color: #353535;
  cursor: pointer;
  font-weight: 700;
  font-size: 24px;
  line-height: 120%;
  letter-spacing: 0px;
}

.template_suff_kik-max-2.tab_name.active .btn {
  background: #007AFF;
  color:#fff;
}
.specs-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.specs-content.active {
  display: block;
  opacity: 1;
}

.specs-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.specs-wrapper .specs-content {
  width: 100%;
}
.specs-wrapper .specs-content .spec_content_inner{
  border-bottom: 1.5px solid #E6E6E6
}
.specs-column {
  width: 50%;
  padding: 0 15px;
}
.product-details .h2{
  margin-bottom:32px;
  font-weight: 700;
  font-size: 48px;
  line-height: 120%;
  letter-spacing: 0px;
}
.specs-wrapper .specs-content .spec_content_inner h4{
  font-weight: 700;
  font-size: 24px;
  line-height: 120%;
  letter-spacing: 0px;
}
.specs-wrapper .specs-content .spec_content_inner p{
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0px;
}
body.product .product-details .cover_tab_name .tab_name.active .btn-primary{
  background:#007AFF;
  color:#fff;
}
@media (max-width: 768px) {
  .specs-wrapper .specs-content .spec_content_inner h4{
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0px;
  }
  .specs-wrapper .specs-content .spec_content_inner p{
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0px;
  }
  .product-details .h2{
    font-weight: 700;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: 0px;
    margin-bottom:24px;
  }
  .cover_tab_name {
    flex-wrap: wrap;
  }
  .product-details .container{
    padding-left:16px;
    padding-right:16px;
  }
  .tab_name .btn {
    padding: 0.4rem 1rem;
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0px;
  }
  .specs-column {
    width: 100%;
    padding:0;
  }
  .specs-wrapper .specs-content .spec_content_inner{
    margin:0;
  }
}
{% endstyle %}

<div class="container my-6 my-md-9 prd-dtl">
  {%- liquid 
    assign mark = 'h3'
    if section.settings.enable_adjust_h_tag
      assign mark = section.settings.adjust_h_tag_to
    endif
  -%}
  <{{ mark }} class="h2">{{ section.settings.product_title }}</{{ mark }}>

  <div class="cover_tab_name">
    {% assign tab_count = 0 %}
    {% for block in section.blocks %}
      {% if block.type == 'tab_name' %}
        {% assign tab_count = tab_count | plus: 1 %}
        <div class="tab_name {% if tab_count == 1 %}active{% endif %}" data-tab_name="{{ block.settings.tab_name | handleize }}">
          <a href="javascript:void(0);" class="btn btn-primary">{{ block.settings.tab_name }}</a>
        </div>
      {% endif %}
    {% endfor %}
  </div>

  <div class="row mt-md-n4 mt-n3 pt-3">
    <div class="col-12 specs-wrapper">
      {% for block in section.blocks %}
        {% if block.type == 'specs' %}
          <div class="specs-content" data-tab_name="{{ block.settings.tab_title | handleize }}">
            <div class="row spec_content_inner">
              <div class="col-12 col-md-6 pt-3 pt-md-4">
                <h4 class="{% if section.settings.columns_per_row == '12' %}mw-text-2 pe-xl-8 pe-md-6{% endif %}">{{ block.settings.specs_title }}</h4>
                {% if block.settings.specs_richtext != blank %}
                  <div class="{% if section.settings.columns_per_row == '12' %}col-12 col-md{% endif %} pb-3 pb-md-4 richtext-with-link">{{ block.settings.specs_richtext | replace: "<p>", "<p class='mb-1'>" }}</div>
                {% endif %}
              </div>
            </div>
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>

{% javascript %}
document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab_name');
  const specBlocks = document.querySelectorAll('.specs-content');
  const specsWrapper = document.querySelector('.specs-wrapper');

  function organizeSpecsInColumns(tabName) {
    specBlocks.forEach(block => {
      block.classList.remove('active');
    });

    const activeSpecs = Array.from(specBlocks).filter(block => block.dataset.tab_name === tabName);
    const halfLength = Math.ceil(activeSpecs.length / 2);

    const leftColumn = document.createElement('div');
    leftColumn.className = 'specs-column';
    const rightColumn = document.createElement('div');
    rightColumn.className = 'specs-column';

    specsWrapper.innerHTML = '';

    activeSpecs.forEach((spec, index) => {
      spec.classList.add('active');
      if (index < halfLength) {
        leftColumn.appendChild(spec);
      } else {
        rightColumn.appendChild(spec);
      }
    });

    specsWrapper.appendChild(leftColumn);
    specsWrapper.appendChild(rightColumn);
  }

  tabButtons.forEach(tab => {
    tab.addEventListener('click', function() {
      tabButtons.forEach(t => t.classList.remove('active'));
      this.classList.add('active');
      const tabName = this.dataset.tab_name;
      organizeSpecsInColumns(tabName);
    });
  });

  // ✅ This part is updated to show all content if no tabs exist
  if (tabButtons.length > 0) {
    const firstTabName = tabButtons[0].dataset.tab_name;
    organizeSpecsInColumns(firstTabName);
  } else {
    // If no tabs are present, show all specs stacked
    specBlocks.forEach(block => {
      block.classList.add('active');
      specsWrapper.appendChild(block);
    });
  }
});
{% endjavascript %}

{% schema %}
{
  "name": "Product details",
  "tag": "section",
  "class": "product-details",
  "settings": [
    {
      "type": "text",
      "id": "product_title",
      "label": "Heading ",
      "default": "Product details"
    },
    {
      "type": "checkbox",
      "id": "enable_adjust_h_tag",
      "label": "Enable adjust H tag",
      "default": false
    },
    {
      "type": "select",
      "id": "adjust_h_tag_to",
      "label": "Adjust the H tag to",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "h4", "label": "H4" },
        { "value": "h5", "label": "H5" },
        { "value": "h6", "label": "H6" }
      ],
      "default": "h3"
    },
    {
      "type": "radio",
      "id": "columns_per_row",
      "label": "Columns per row",
      "options": [
        { "value": "12", "label": "one" },
        { "value": "6", "label": "two" }
      ],
      "default": "12"
    }
  ],
  "blocks": [
    {
      "type": "specs",
      "name": "Specs",
      "settings": [
        {
          "type": "text",
          "id": "tab_title",
          "label": "Enter tab title here"
        },
        {
          "type": "text",
          "id": "specs_title",
          "label": "Label"
        },
        {
          "type": "richtext",
          "id": "specs_richtext",
          "label": "Content"
        }
      ]
    },
    {
      "type": "tab_name",
      "name": "Tab name",
      "settings": [
        {
          "type": "text",
          "id": "tab_name",
          "label": "Tab name"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product details",
      "blocks": [
        {
          "type": "specs",
          "settings": {
            "specs_title": "Weight",
            "specs_richtext": "<p>10.25 ounces</p>"
          }
        },
        {
          "type": "specs",
          "settings": {
            "specs_title": "Size",
            "specs_richtext": "<p>Height: 95 inches</p><p>Width: 95 inches</p><p>Depth: 95 inch</p>"
          }
        },
        {
          "type": "specs",
          "settings": {
            "specs_title": "Color",
            "specs_richtext": "<p>Red, Blue, Gold, White</p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}
